import React, { Component, Fragment } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import { Spin, Table, Card, Button,message, Popconfirm } from 'antd';
import styles from './index.less';
import router from 'umi/router';


class XcxDNS extends Component {
  state = {
    loading: true
  }

  componentWillMount() {
    window.Isoption = false;
    const { dispatch } = this.props;
    dispatch({
      type: `xcxauth/GetAuthStatus`,
      callback: {
          success: (data) => {
              if (data.Code !== 0) {
                  router.replace({
                      pathname: `/${window.storeId}/wechat/miniapp`,
                  });
              } else {
                this.GetInfo();
              }
          }
      }
    });

  }
  componentDidMount() {
    window.Isoption = true;
  }
  GetInfo = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'xcxauth/GetDomainInfo',
      callback: {
        success: res =>{
          this.setState({
            loading:false
          })
        }
      }
    });
  };
  ResetDomain = () =>{
    const { dispatch } = this.props;
    dispatch({
      type: 'xcxauth/ResetDomain',
      callback: {
        success: res =>{
          if(res.Code===0){
            this.GetInfo();
            message.success('重置成功');
          }
        },
        error: res => {
          message.error('重置失败'+res.Msg);
        }
      }
    });
  }
  render() {
    const {
      loading,
    } = this.state;
    const { domainInfo, loading1, loadingBtn } = this.props;
    const columns=[{
      title: '服务器配置',
      dataIndex: 'configuration',
      key: 'configuration',
      className:'vertical',
      width:'20%'
    },{
      title: '',
      key: 'domainName',
      dataIndex: 'domainName',
      render: text => text.map((item,index) =><p key={index}>{item}</p>),
    },{
      title: '备注',
      key: 'remark',
      align: 'right',
      className:'vertical',
      width:'25%',
      render: text => <span>一个月内可申请5次修改</span>,
    }];
    const RequestDomain=domainInfo?JSON.parse(domainInfo.RequestDomain):[],
    WSRequestDomain=domainInfo?JSON.parse(domainInfo.WSRequestDomain):[],
    UploadDomain=domainInfo?JSON.parse(domainInfo.UploadDomain):[];
    const dataSource1=[{
      key: '1',
      configuration: 'requst合法域名',
      domainName: RequestDomain
    },
    {
      key: '2',
      configuration: 'file合法域名',
      domainName: UploadDomain
    }]
    const dataSource2=[{
      key: '2',
      configuration: '业务域名',
      domainName: WSRequestDomain
    }]

    return (
      <Spin spinning={loading}>
        <Card className={styles.Domain} bordered={false} title="服务器域名" extra={<Popconfirm style={{zIndex:1051}} placement="topLeft" title="确认重置？" onConfirm={this.ResetDomain} okText="确认" cancelText="取消"><Button type="primary" loading={loadingBtn}>重置合法域名</Button></Popconfirm>}>
          <Table loading={loading1} columns={columns} dataSource={dataSource1} pagination={false}/>
        </Card>
        <Card className={styles.Domain} bordered={false} title="业务域名">
          {WSRequestDomain.length?<Table loading={loading1} columns={columns} dataSource={dataSource2} pagination={false}/>:
          <div style={{color:'#8C8C8C',textAlign:'center',padding:'48px 0'}}>添加业务域名后，小程序内可调用组件打开限定域名内的网页。</div>}
        </Card>
      </Spin>
    );
  }
}
export default connect(({ global, loading, xcxauth}) => ({
  loading1: loading.effects['xcxauth/GetDomainInfo'],
  domainInfo: xcxauth.domainInfo,
  loadingBtn: loading.effects['xcxauth/ResetDomain']
}))(XcxDNS);
